<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta
			name="viewport"
			content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"
		/>
		<meta name="format-detection" content="telephone=no" />
		<meta name="format-detection" content="email=no" />
		<meta http-equiv="Pragma" content="no-cache" />
		<meta http-equiv="Cache-Control" content="no-cache" />
		<meta http-equiv="Expires" content="0" />
		<title>身份审核</title>
		<!-- 引入 vant UI 组件库样式文件 -->
		<link rel="stylesheet" href="../common/css/vant-index.css" />
		<style type="text/css">
			body {
				background-color: #f3f3f5;
			}
			.instructions {
				background-color: #fff;
				padding: 0.21rem 0.31rem;
				font-size: 0.25rem;
				margin-top: 0.31rem;
			}
			.padding0 {
				padding: 0 0.31rem;
			}
			.insCard {
				margin-bottom: 0.31rem;
			}
			.van-button--info {
				background-color: #e22e30;
				border-color: #e22e30;
				font-size: 18px;
			}
			.van-uploader__wrapper {
				flex-wrap: nowrap;
			}
		</style>
	</head>

	<body>
		<div id="app" v-cloak>
			<div class="instructions">
				<img
					src="./img/instructions.png"
					align="left"
					style="width: 0.34rem; height: 0.34rem"
				/><span
					>以下信息仅作认证使用，我们将严格保密，请上传真实有效信息以便快捷通过审核。<span
						style="color: #e22e30"
						>请您至少上传1种证件作为您的身份审核依据</span
					>，认证信息必须包含医生姓名、职称、科室、医院名称,如您需要开通在线执医资格，则需上传四证,包括胸牌、职称证、执业证、资格证，请您注意!</span
				>
			</div>
			<div class="instructions" style="padding-top: 0.31rem">
				<div class="insCard">
					<div style="font-size: 0.33rem; margin-bottom: 0.25rem">工作证</div>
					<span style="font-size: 0.25rem; color: #666666"
						>（选填项，要求所在医院的工作证件或企微个人资料页）</span
					>
					<div v-if="detail.doctorsWorkCard" style=" margin-top: 0.25rem;position: relative;">
						<img src="img/delete.png" style="position: absolute;width: 0.5rem;height: 0.5rem;left: 3.92rem;top:-0.25rem" @click="handleDelete1"></img>
						<img
							:src="detail.doctorsWorkCard"
							style="width: 4.17rem; height: 2.5rem;"
						/>
					</div>
					<div
						style="
							display: flex;
							align-items: center;
							margin-bottom: 0.25rem;
							margin-top: 0.25rem;
						"
					>
						<van-uploader :after-read="afterRead">
							<img
								src="./img/photo.png"
								style="width: 1.21rem; height: 1.21rem; display: inline-block"
							/>
						</van-uploader>
					</div>
					<div
						style="
							font-size: 0.33rem;
							color: #333333;
							font-weight: 300;
							margin-bottom: 0.25rem;
						"
					>
						示例
					</div>
					<img
						src="./img/workCard.png"
						style="width: 4.17rem; height: 2.5rem"
					/>
				</div>
				<div class="insCard">
					<div style="font-size: 0.33rem; margin-bottom: 0.25rem">职称证</div>
					<span style="font-size: 0.25rem; color: #666666"
						>（选填项，要求带有职称、资格级别的证件）</span
					>
					<div v-if="detail.doctorsProfessionImg" style="margin-top: 0.25rem;position: relative;">
						<img src="img/delete.png" style="position: absolute;width: 0.5rem;height: 0.5rem;left: 3.92rem;top:-0.25rem" @click="handleDelete2"></img>
						<img
							:src="detail.doctorsProfessionImg"
							style="width: 4.17rem; height: 2.5rem"
						/>
					</div>
					<div
						style="
							display: flex;
							align-items: center;
							margin-bottom: 0.25rem;
							margin-top: 0.25rem;
						"
					>
						<van-uploader :after-read="afterRead1">
							<img
								src="./img/photo.png"
								style="width: 1.21rem; height: 1.21rem; display: inline-block"
							/>
						</van-uploader>
					</div>
					<div
						style="
							font-size: 0.33rem;
							color: #333333;
							font-weight: 300;
							margin-bottom: 0.25rem;
						"
					>
						示例
					</div>
					<img
						src="./img/certificate.png"
						style="width: 4.17rem; height: 2.5rem"
					/>
				</div>
				<div class="insCard">
					<div style="font-size: 0.33rem; margin-bottom: 0.25rem">执业证</div>
					<span style="font-size: 0.25rem; color: #666666"
						>（选填项，需提供证件第一页和第二页）</span
					>
					<!-- <img
						v-if="detail.practiceImg"
						:src="detail.practiceImg"
						style="width: 4.17rem; height: 2.5rem"
					/> -->
					<div
						style="
							display: flex;
							align-items: center;
							margin-bottom: 0.25rem;
							margin-top: 0.25rem;
						"
					>
						<van-uploader v-model="doctorsCertificate" :max-count="2">
							<img
								src="./img/photo.png"
								style="width: 1.21rem; height: 1.21rem; display: inline-block"
							/>
						</van-uploader>
					</div>
					<div
						style="
							font-size: 0.33rem;
							color: #333333;
							font-weight: 300;
							margin-bottom: 0.25rem;
						"
					>
						示例
					</div>
					<img
						src="./img/greenCard.png"
						style="width: 3.33rem; height: 2.5rem; display: inline-block"
					/>
					<img
						src="./img/cardInside.png"
						style="width: 3.33rem; height: 2.5rem; display: inline-block"
					/>
				</div>
				<div class="insCard">
					<div style="font-size: 0.33rem; margin-bottom: 0.25rem">资格证</div>
					<span
						style="font-size: 0.25rem; color: #666666; margin-bottom: 0.25rem"
						>（选填项，需提供证件第一页和第二页）</span
					>
					<!-- <img
						v-if="detail.qualifiyImg"
						:src="detail.qualifiyImg"
						style="width: 4.17rem; height: 2.5rem"
					/> -->
					<div
						style="
							display: flex;
							align-items: center;
							margin-bottom: 0.25rem;
							margin-top: 0.25rem;
						"
					>
						<van-uploader v-model="doctorsWorkPermits" :max-count="2">
							<img
								src="./img/photo.png"
								style="width: 1.21rem; height: 1.21rem; display: inline-block"
							/>
						</van-uploader>
					</div>
					<div
						style="
							font-size: 0.33rem;
							color: #333333;
							font-weight: 300;
							margin-bottom: 0.25rem;
						"
					>
						示例
					</div>
					<img
						src="./img/redCard.png"
						style="width: 3.33rem; height: 2.5rem; display: inline-block"
					/>
					<img
						src="./img/cardInside.png"
						style="width: 3.33rem; height: 2.5rem; display: inline-block"
					/>
				</div>
				<div
					style="
						width: 80%;
						margin-top: 0.5rem;
						margin-left: 10%;
						margin-bottom: 10px;
					"
				>
					<van-button round type="info" block @click="comfirm"
						>提交审核</van-button
					>
				</div>
			</div>
		</div>
	</body>
	<!-- 引入 rem -->
	<script src="../common/js/rem.js"></script>
	<!-- 上线环境用 -->
	<script src="../common/js/vue.global.prod.js"></script>
	<!-- 引入 UI 组件库 -->
	<script src="../common/js/vant.min.js"></script>
	<!-- axios 接口调用 -->
	<script src="../common/js/axios.min.js"></script>
	<script src="../base.js"></script>
	<script src="../common/js/url.min.js"></script>
	<script src="../common/js/rem.js"></script>

	<script type="module">
		import {
			getAction,
			postAction,
			spliceUrl,
		} from '../common/js/api/vue3-axios-utils.js'

		const identify = {
			data() {
				return {
					url: {
						upLoad: '/sys/common/upload',
					},
					detail: {
						doctorsWorkPermits: [],
						doctorsCertificate: [],
					},
					doctorId: '',
					doctorsWorkPermits: [],
					doctorsCertificate: [],
				}
			},
			created() {
				this.doctorId = url('?id') || ''
				const detail = JSON.parse(sessionStorage.getItem('doctorInfo'))
				this.detail = Object.assign(this.detail, detail)
			},
			methods: {
				afterRead(file) {
					// 此时可以自行将文件上传至服务器
					console.log(file)
					let formData = new FormData()
					const toast = vant.Toast.loading({
						message: '上传中...',
						forbidClick: true,
						duration: 0
					});
					formData.append('file', file.file)
					postAction(spliceUrl(this.url.upLoad), formData).then(res => {
						res = res.data
						console.log('upLoad', res)
						if (res.success) {
							this.detail.doctorsWorkCard = res.message
							toast.clear()
						}
					})
				},
				afterRead1(file) {
					// 此时可以自行将文件上传至服务器
					console.log(file)
					let formData = new FormData()
					const toast = vant.Toast.loading({
						message: '上传中...',
						forbidClick: true,
						duration: 0
					});
					formData.append('file', file.file)
					console.log(formData)
					postAction(spliceUrl(this.url.upLoad), formData).then(res => {
						res = res.data
						console.log('upLoad', res)
						if (res.success) {
							this.detail.doctorsProfessionImg = res.message
							toast.clear()
						}
					})
				},
				getDoctorsQualifiyImg() {
					return Promise.all(
						this.doctorsWorkPermits.map(v => {
							return new Promise(resolve => {
								let formData = new FormData()
								formData.append('file', v.file)
								postAction(spliceUrl(this.url.upLoad), formData).then(res => {
									if (res.data.success) {
										resolve(res.data.message)
									}
								})
							})
						})
					).then(res => {
						this.detail.doctorsWorkPermits = res
					})
				},
				getDoctorsPracticeImg() {
					return Promise.all(
						this.doctorsCertificate.map(v => {
							return new Promise(resolve => {
								let formData1 = new FormData()
								formData1.append('file', v.file)
								postAction(spliceUrl(this.url.upLoad), formData1).then(res => {
									if (res.data.success) {
										resolve(res.data.message)
									}
								})
							})
						})
					).then(res => {
						this.detail.doctorsCertificate = res
					})
				},
				handleDelete1(){
					this.detail.doctorsWorkCard = ''
				},
				handleDelete2(){
					this.detail.doctorsProfessionImg = ''
				},
				comfirm() {
					console.log(this.doctorId)
					const doctorsWorkPermits = this.getDoctorsQualifiyImg()
					const doctorsCertificate = this.getDoctorsPracticeImg()
					Promise.all([doctorsWorkPermits, doctorsCertificate]).then(() => {
						if (
							!this.detail.doctorsWorkCard &&
							!this.detail.doctorsProfessionImg &&
							this.detail.doctorsWorkPermits.length == 0 &&
							this.detail.doctorsCertificate.length == 0
						) {
							vant.Toast('至少上传一张')
							return
						}
						console.log(this.detail)
						this.detail.doctorsWorkPermits =
							this.detail.doctorsWorkPermits.join(',')
						this.detail.doctorsCertificate =
							this.detail.doctorsCertificate.join(',')
						this.detail.doctorsIsverify = 2
						postAction(spliceUrl('/201/02/2010202'), this.detail).then(res => {
							res = res.data
							console.log('save', res)
							if (res.success) {
								this.$toast.success({
									message: res.message,
									duration: 300,
									onClose: function () {
										console.log(this)
										sessionStorage.removeItem('doctorInfo')
										window.location.href =
											'./audit.html?id=' + localStorage.getItem('did')
									},
								})
							}
						})
					})
				},
			},
		}

		const app = Vue.createApp(identify)

		app.use(vant)

		// 通过 CDN 引入时不会自动注册 Lazyload 组件
		// 可以通过下面的方式手动注册
		app.use(vant.Lazyload)

		// 调用函数组件，弹出一个 Toast
		// vant.Toast("刷新成功");

		app.mount('#app')
	</script>
</html>
